<template>
  <div class="pay-page">
    <Heads types="payment"></Heads>

    <div class="order van-ellipsis">订单编号: {{orderId}}</div>

    <div class="content">
      <div v-if="types === 'obj'">
        <van-card
          style="text-align: left;"
          :num="obj.selectedNum"
          :price="obj.goods_info.price | decimalPoint"
          :thumb="obj.goods_info.picture">
          <div slot="title" class="van-ellipsis">{{obj.goods_info.title}}</div>
          <div slot="desc">
            <p>规格: {{obj.s1}} | {{obj.s2}}</p>
            <p class="van-ellipsis">{{'留言: '+obj.messages.message_0}}</p>
          </div>
        </van-card>
      </div>
      <div v-if="types === 'list'">
        <div v-for="item in list" :key="'pay'+item.goodsId+item.selectedId">
          <van-card
            style="text-align: left;"
            :num="item.selectedNum"
            :price="item.goods_info.price | decimalPoint"
            :thumb="item.goods_info.picture">
            <div slot="title" class="van-ellipsis">{{item.goods_info.title}}</div>
            <div slot="desc">
              <p>规格: {{item.s1}} | {{item.s2}}</p>
              <p class="van-ellipsis">{{'留言: '+item.messages.message_0}}</p>
            </div>
          </van-card>
        </div>
      </div>
      <div v-if="types === ''" class="order">无商品信息</div>
    </div>

    <div class="total order">共计: {{totalNum}} 件</div>

    <div class="address">
      <van-address-list
        v-if="areaList.length>0"
        :switchable="false"
        :list="areaList"
        default-tag-text="默认"
        @edit="onEdit"
      />
      <div class="order" v-else>当前无默认地址。<span @click="onEdit">点我去设置<van-icon name="edit" /></span></div>
    </div>

    <van-submit-bar
      :price="totalPrice"
      button-text="提交订单"
      @submit="onSubmit"
    />
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

import Vue from 'vue'
import { Card, SubmitBar, Toast, AddressList } from 'vant'
Vue.use(Card).use(SubmitBar).use(Toast).use(AddressList)

export default {
  data () {
    return {
      totalPrice: 0,
      totalNum: 0
    }
  },
  computed: {
    ...mapState('payModule', ['types', 'obj', 'list']),
    ...mapState('addressModule', ['areaLists']),
    areaList () {
      const arr = this.areaLists.filter(item => {
        return item.isDefault === true
      })
      if (arr.length) {
        return arr
      } else {
        return []
      }
    },
    orderId () {
      return JSON.parse(sessionStorage.userInfo).token + new Date().getTime()
    }
  },
  methods: {
    ...mapMutations('footerModule', ['FOOTERSHOW']),
    ...mapMutations('payModule', ['SETTYPES', 'SETOBJ', 'SETLIST']),
    onSubmit () {
      Toast({
        message: '总计: ' + (this.totalPrice / 100).toFixed(2) + '元。但是我们还没有正式营业',
        closeOnClick: true
      })
    },
    onEdit () {
      this.$router.push({ name: 'Address-list' })
    }
  },
  mounted () {
    this.FOOTERSHOW(false)
    if (this.types === 'obj') {
      this.totalPrice = this.obj.selectedNum * this.obj.goods_info.price
      this.totalNum = this.obj.selectedNum
    }
    if (this.types === 'list') {
      this.totalPrice = this.list.map(item => {
        return item.selectedNum * item.goods_info.price
      }).reduce((a, b) => a * 1 + b * 1)
      this.totalNum = this.list.map(item => {
        return item.selectedNum
      }).reduce((a, b) => a * 1 + b * 1)
    }
  },
  destroyed () {
    this.FOOTERSHOW(true)
    this.SETTYPES('')
    this.SETOBJ(null)
    this.SETLIST(null)
  }
}
</script>

<style lang="scss" scoped>
.pay-page{
  .order {
    text-align: left;
    border-radius: .1rem;
    width: 93vw;
    margin: .3rem auto;
    height: 1rem;
    line-height: 1rem;
    background-color: #fff;
  }
  .address {
    .van-address-list__bottom {
      display: none;
    }
  }
}
</style>
